<template>
  <div class="common-statistics">
    <stats-card
        title="当前支出" color="#CA6C65" unit="元" icon="fa-solid fa-sack-xmark"
        :value="formatAmount(billStats.expensive)" />

    <stats-card
        title="当前收入" color="#6FBB69" unit="元" icon="fa-solid fa-sack-dollar"
        :value="formatAmount(billStats.income)" />

    <stats-card
        title="当前结余" color="#E4BF62" unit="元" icon="fa-solid fa-coins"
        :value="formatAmount(billStats.balance)" />

    <stats-card
        title="支出占比" color="#5470C6" unit="%" icon="fa-solid fa-chart-pie"
        :value="(billStats.rate * 100).toFixed(2)" />
  </div>
</template>

<script setup lang="ts">
import StatsCard from '@/components/StatsCard.vue'
import { useBillStore } from '@/store/bill.ts'
import { ref, watch } from 'vue'
import { getBillSummaryStats } from '@/utils/home/billUtil.ts'
import { IBillSummaryStats } from '@/types/bill.ts'
import { formatAmount } from 'vue3-common/utils/numberUtil'

const billStore = useBillStore()

watch(() => billStore.isRefresh, () => {
  updateStats()
})

const billStats = ref<IBillSummaryStats>({
  balance: 0,
  expensive: 0,
  income: 0,
  rate: 0
})

const updateStats = () => {
  billStats.value = getBillSummaryStats(billStore.billRecordList)
}
</script>
